<template>
  <a-modal
    title="新增食物"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :labelCol="{'width':'40%'}"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <h2>(以每100g可食部计)</h2>
        <a-row type="flex" justify="space-around" :gutter="[30]">
          <a-col :span="10">
            <!--       has-feedback展示校验状态图标-->
            <a-form-item
              style="display: none;"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback
            >
              <a-input v-decorator="['id']" />
            </a-form-item>
            <a-form-item
              label="食物名称"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback
            >
              <a-input style="width: 70%" placeholder=""
                       v-decorator="['foodName', {rules: [{required: true, message: '请填写食物名称'}]}]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="10">
            <a-form-item
              label="食部"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback
            >
              <a-input-number v-decorator="['foodDepartment', {rules: [{required: true, message: '请填写食部'}]}]" :min="0"
                              style="width: 70%;"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row type="flex" justify="space-around" :gutter="[30]">
          <!--          <a-col :span="10">-->
          <!--            <a-form-item-->
          <!--              label="简写码"-->
          <!--              :labelCol="labelCol"-->
          <!--              :wrapperCol="wrapperCol"-->
          <!--              has-feedback-->
          <!--            >-->
          <!--              <a-input style="width: 70%" placeholder=""-->
          <!--                       v-decorator="['', {rules: [{required: true, message: '请输入讲师名称！'}]}]"-->
          <!--              />-->
          <!--            </a-form-item>-->
          <!--          </a-col>-->
          <a-col :span="10">
            <a-form-item
              label="食物类型"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback
            >
              <a-select v-decorator="['foodMaterialsTypeId',{rules:[{required:true,message:'请选择食物类型'}]}]"
                        style="width: 70%"
              >
                <a-select-option v-for="item in foodOptions" :key="item.id" :value="item.id">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="10"></a-col>
        </a-row>
        <a-divider dashed />

        <a-row type="flex" justify="center" :gutter="[30]">
          <a-col :span="7">
            <a-form-item
              label="热量"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input-number v-decorator="['heat']" :min="0" :step="0.01" style="width: 50%;"
                              :precision="2"
              />
              <span class="unit">千卡</span>
            </a-form-item>
          </a-col>
          <!--          <a-col :span="7">-->
          <!--            <a-form-item-->
          <!--              label="能量"-->
          <!--              :labelCol="labelCol"-->
          <!--              :wrapperCol="wrapperCol"-->

          <!--            >-->
          <!--              <a-input style="width: 50%" placeholder="" />-->
          <!--              <span class="unit">千焦</span>-->
          <!--            </a-form-item>-->
          <!--          </a-col>-->
          <a-col :span="7">
            <a-form-item
              label="蛋白质"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input-number v-decorator="['protein']" :min="0" :step="0.01" style="width: 50%;"
                              :precision="2"
              />
              <span class="unit">克</span>
            </a-form-item>
          </a-col>
          <a-col :span="7">
            <a-form-item
              label="脂肪"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input-number v-decorator="['fat']" :min="0" :step="0.01" style="width: 50%;"
                              :precision="2"
              />
              <span class="unit">克</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row type="flex" justify="center" :gutter="[30]">
          <a-col :span="7">
            <a-form-item
              label="碳水化合物"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"

            >
              <a-input-number v-decorator="['carbohydrate']" :min="0" :step="0.01" style="width: 50%;"
                              :precision="2"
              />
              <span class="unit">克</span>
            </a-form-item>
          </a-col>
          <a-col :span="7"></a-col>
          <a-col :span="7"></a-col>
        </a-row>
        <a-divider dashed />

        <a-row type="flex" justify="center" :gutter="[30]">
          <a-col :span="7">
            <a-form-item
              label="视黄醇"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"

            >
              <a-input-number v-decorator="['retinol']" :min="0" :step="0.01" style="width: 50%;"
                              :precision="2"
              />
              <span class="unit">毫克</span>
            </a-form-item>
          </a-col>
          <a-col :span="7">
            <a-form-item
              label="胡萝卜素"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"

            >
              <a-input-number v-decorator="['carotene']" :min="0" :step="0.01" style="width: 50%;"
                              :precision="2"
              />
              <span class="unit">毫克</span>
            </a-form-item>
          </a-col>
          <a-col :span="7">
            <a-form-item
              label="尼克酸"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"

            >
              <a-input-number v-decorator="['nicotinicAcid']" :min="0" :step="0.01" style="width: 50%;"
                              :precision="2"
              />
              <span class="unit">毫克</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row type="flex" justify="center" :gutter="[30]">
          <a-col :span="7">
            <a-form-item
              label="维生素A"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"

            >
              <a-input-number v-decorator="['vitA']" :min="0" :step="0.01" style="width: 50%;"
                              :precision="2"
              />
              <span class="unit">毫克</span>
            </a-form-item>
          </a-col>
          <a-col :span="7">
            <a-form-item
              label="维生素B1"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"

            >
              <a-input-number v-decorator="['vitB1']" :min="0" :step="0.01" style="width: 50%;"
                              :precision="2"
              />
              <span class="unit">毫克</span>
            </a-form-item>
          </a-col>
          <a-col :span="7">
            <a-form-item
              label="维生素B2"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"

            >
              <a-input-number v-decorator="['vitB2']" :min="0" :step="0.01" style="width: 50%;"
                              :precision="2"
              />
              <span class="unit">毫克</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row type="flex" justify="center" :gutter="[30]">
          <a-col :span="7">
            <a-form-item
              label="维生素C"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"

            >
              <a-input-number v-decorator="['vitC']" :min="0" :step="0.01" style="width: 50%;"
                              :precision="2"
              />
              <span class="unit">毫克</span>
            </a-form-item>
          </a-col>
          <a-col :span="7">
          </a-col>
          <a-col :span="7">
          </a-col>
        </a-row>
        <a-divider dashed />

        <a-row type="flex" justify="center" :gutter="[30]">
          <a-col :span="7">
            <a-form-item
              label="钙"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"

            >
              <a-input-number v-decorator="['calcium']" :min="0" :step="0.01" style="width: 50%;"
                              :precision="2"
              />
              <span class="unit">毫克</span>
            </a-form-item>
          </a-col>
          <a-col :span="7">
            <a-form-item
              label="磷"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"

            >
              <a-input-number v-decorator="['phosphorus']" :min="0" :step="0.01" style="width: 50%;"
                              :precision="2"
              />
              <span class="unit">毫克</span>
            </a-form-item>
          </a-col>
          <a-col :span="7">
            <a-form-item
              label="铁"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"

            >
              <a-input-number v-decorator="['iron']" :min="0" :step="0.01" style="width: 50%;"
                              :precision="2"
              />
              <span class="unit">毫克</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row type="flex" justify="center" :gutter="[30]">
          <a-col :span="7">
            <a-form-item
              label="锌"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"

            >
              <a-input-number v-decorator="['zinc']" :min="0" :step="0.01" style="width: 50%;"
                              :precision="2"
              />
              <span class="unit">毫克</span>
            </a-form-item>
          </a-col>
          <a-col :span="7"></a-col>
          <a-col :span="7"></a-col>
        </a-row>
        <a-divider dashed />
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { foodOptionList, foodStoreEdit } from '@/api/modular/diet/dietManage'

export default {
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 10 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 }
      },
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      foodOptions: []
    }
  },
  created() {
    this.getFoodOption()
  },
  methods: {
    // 初始化方法
    edit(record) {
      this.visible = true
      this.$nextTick(() => {
        console.log(record.id,'11')
        this.form.setFieldsValue(
          {
            id: record.id,
            foodName: record.foodName,
            foodDepartment: record.foodDepartment,
            foodMaterialsTypeId: record.foodMaterialsTypeId,
            heat: record.heat,
            protein: record.protein,
            fat: record.fat,
            carbohydrate: record.carbohydrate,
            retinol: record.retinol,
            carotene: record.carotene,
            calcium: record.calcium,
            iron: record.iron,
            zinc: record.zinc,
            phosphorus: record.phosphorus,
            nicotinicAcid: record.nicotinicAcid,
            vitA: record.vitA,
            vitB1: record.vitB1,
            vitB2: record.vitB2,
            vitC: record.vitC
          }
        )
      })
    },
    async getFoodOption() {
      const { data: data } = await foodOptionList()
      this.foodOptions = data
    },
    handleSubmit() {
      const { form: { validateFields } } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          values.lecturerType = 0
          foodStoreEdit(values).then((res) => {
            if (res.success) {
              this.$message.success('编辑成功')
              this.visible = false
              this.confirmLoading = false
              this.$emit('ok', values)
              this.form.resetFields()
            } else {
              this.$message.error('编辑失败：' + res.message)
            }
          }).finally((res) => {
            this.confirmLoading = false
          })
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel() {
      this.form.resetFields()
      this.visible = false
    }
  }
}
</script>

<style scoped>
.unit {
  margin-left: 5px;
}
</style>
